<template>

     <!-- <h1> 商品编号 11000-12999</h1> -->
     <el-button type="success" @click="addBtnFun">
      <el-icon><Plus /></el-icon>
      添加</el-button>
  <el-button @click="bigdel" type="danger">
    <el-icon><Delete /></el-icon>
    批量删除</el-button>
    <el-table
    ref="multipleTableRef"
    :data="listone"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="商品名称" width="120">
      <template #default="scope">{{ scope.row.configName }}</template>
    </el-table-column>
    <el-table-column property="redirectUrl" label="跳转链接" width="120" />
    <el-table-column property="configRank" label="排序值" />
    <el-table-column property="goodsId" label="商品编号" />
    <el-table-column property="createTime" label="添加时间" />
    <el-table-column  label="操作" >
        <template #default="scope">
        <!-- {{ scope.row.redirectUrl }} -->
        <el-button size="small" type="primary" @click="handlePut(scope.$index, scope.row)">
          修改
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  





   <!-- 弹框 -->
   <el-dialog v-model="dialogFormVisible" :title=title width="500" @closed="closed">
    <!-- 文件 -->
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
      class="demo-ruleForm" status-icon>
    

      <el-form-item label="商品名称" prop="configName">
        <el-input v-model="ruleForm.configName" />
      </el-form-item>

      <el-form-item label="跳转链接" prop="redirectUrl">
        <el-input v-model="ruleForm.redirectUrl" />
      </el-form-item>
      <el-form-item label="商品编号" prop="goodsId">
        <el-input v-model="ruleForm.goodsId" />
      </el-form-item>

      <el-form-item label="排序值" prop="configRank">
        <el-input v-model="ruleForm.configRank" />
      </el-form-item>




      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
        <el-button @click="dialogFormVisible = false; ">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>



  <!-- 分页 -->

  <el-pagination background @current-change="currentChange" layout="prev, pager, next" :total="total" />


</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { ElTable } from 'element-plus'
import axios from '../../ajax';
import { Plus,Delete} from '@element-plus/icons-vue'

let dialogFormVisible = ref(false)
let title = ref('添加')
let carouselId = "";//id

const multipleTableRef = ref()

const multipleSelection = ref([])
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
//拿数据
onMounted(()=>{
getdata(1)
})
let listone=ref([])
let total = ref(0)

let getdata=async(pageNumber)=>{
    let {list,totalCount}=await axios.get('/indexConfigs',{
        params:{
            pageNumber,
            pageSize: 10,
            configType: 3
        }
    })
    listone.value=list
    // console.log(list);
  total.value = totalCount

}


//删除
let handleDelete = (i, row) => {
  console.log(row);
  listone.value.splice(i, 1)
  getid([row.configId])
}
let getid = async (ids) => {//拿到id
  let res = await axios.delete('/indexConfigs/delete', {
    data: {
      ids
    }

  })
}
//批量删除

let bigdel = () => {//删除

if (multipleSelection.value.length == 0) {
  // alert("未选择")
  ElMessage.error('未选择!')
}

let arry = []
multipleSelection.value.map(item => arry.push(item.carouselId))

multipleSelection.value.map(item => {
  listone.value.map((items, index) => {
    if (item.carouselId == items.carouselId) {
      console.log(index);
      listone.value.splice(index, 1)
    }
  })
})


getid(arry)
}



let addBtnFun = () => {//添加
  title.value = "添加"
  dialogFormVisible.value = true
  carouselId = '';
  ruleForm.configName= ""
  ruleForm.redirectUrl= ''
  ruleForm.goodsId= ""
  ruleForm.createTime= ""
  ruleForm.configRank= ""

};
const ruleFormRef = ref()
const ruleForm = reactive({
  configName: "",
  redirectUrl: '',
  goodsId: "",
  configType:3,
  configRank:""
})
const rules = reactive({  // 表单验证
  configName: [
    { required: true, message: '名字', trigger: 'blur' },
  ],
  redirectUrl: [
    { required: true, message: '链接', trigger: 'blur' },
  ],
  goodsId: [
    { required: true, message: 'id不能为空', trigger: 'blur' },
  ],
  configRank: [
    { required: true, message: '排序不能为空', trigger: 'blur' },
  ],
})
//弹框
const handleAvatarSuccess = (
  response,
  uploadFile
) => {
  console.log(response);
  ruleForm.configName = response.data
}


//确定
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {//验证通过----ajax
      console.log('submit!')
      if (title.value == '添加') {
        submitfun()
      }else{
        submitfunput()
      }


    } else { // 验证失败
      console.log('error submit!', fields)
    }
  })
}

let submitfun = async () => {//添加
  let res = await axios.post('/indexConfigs', {
    configName: ruleForm.configName,
    configRank: ruleForm.configRank,
    configType: ruleForm.configType,
    goodsId: ruleForm.goodsId,
    redirectUrl: ruleForm.redirectUrl,
  })
  dialogFormVisible.value = false
  getdata(1);
}
let submitfunput = async () => {//修改
  let res = await axios.put('/indexConfigs', {
    configName: ruleForm.configName,
    configRank: ruleForm.configRank,
    configType: ruleForm.configType,
    goodsId: ruleForm.goodsId,
    redirectUrl: ruleForm.redirectUrl,
    configId:carouselId 

  })
  dialogFormVisible.value = false
  getdata(1);
}
//修改
let handlePut = (index, row) => {
  title.value = '修改'
  console.log(row);
  dialogFormVisible.value = true
  carouselId =row.configId,
 ruleForm.configName=row.configName,
 ruleForm.configRank=row.configRank,
ruleForm.configType=row.configType,
 ruleForm.goodsId=row.goodsId,
 ruleForm.redirectUrl=row.redirectUrl

}

let currentChange = (page) => {
  console.log(page);
  getdata(page)
}
let closed=()=>{
  
}
</script>

<style  lang="scss" scoped>
.el-pagination {
justify-content: center;
}
</style>